<template>
    <div class="theme-container">
        <div class="left-container">
            <el-scrollbar class="left-scrollbar-container">
                <p class="theme-title">外观主题</p>
<!--                <el-row>
                    <el-col :span="3">
                        <span class="theme-prompt-text">风格</span>
                    </el-col>
                  <el-col :span="3">
                        <span
                          :class="{'style-btn-active':activeStyle==''}"
                          class="style-btn" @click="activeStyleHandle('')"
                        >全部</span>
                  </el-col>
                    <el-col
                        v-for="item in styleList"
                        :key="item.dictCode" :span="3"
                    >
                        <span
                            :class="{'style-btn-active':activeStyle==item.dictCode}"
                            class="style-btn" @click="activeStyleHandle(item)"
                        >{{ item.dictName }}</span>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="3">
                        <span class="theme-prompt-text">颜色</span>
                    </el-col>
                    <el-col :span="3">
                        <span
                            :class="{'style-btn-active':activeColor==''}"
                            class="style-btn" @click="activeColorHandle('')"
                        >全部</span>
                    </el-col>

                  <el-col
                    v-for="item in colorList"
                    :key="item.dictCode" :span="3"
                  >
                        <span
                          :style="{backgroundColor: item.dictColor}"
                          :class="{'style-btn-active':activeStyle==item.dictCode}"
                          class="style-btn" @click="activeColorHandle(item)"
                        >{{ item.dictName }}</span>
                  </el-col>


                </el-row>-->
                <el-row>
                    <el-col
                        v-for="t in themeList"
                        :key="t.themeId"
                        :span="8" class="theme-img-view"
                        @click.native="activeThemeHandle(t)"
                    >
                        <p :class="{'head-list-view-select':activeTheme.themeId==t.themeId}">
                            <el-image
                                :class="{'head-list-img-active':activeTheme.themeId==t.themeId}"
                                :src="t.headImage"
                                class="head-list-img"
                                fit="cover"
                                style="width: 100px; height: 100px;"
                            />
                        </p>
                    </el-col>
                </el-row>
            </el-scrollbar>
        </div>
        <pre-view :key="projectFormKey" :project-key="projectId" :change-title=true />
        <div class="right-container">
            <p class="right-title">外观设置</p>
            <el-row align="middle" class="option-line-view" type="flex">
                <el-col :span="8">
                    <span class="option-line-title">添加logo</span>
                </el-col>
                <el-col :offset="8" :span="8">
                    <el-switch
                        v-model="showSettings.logoSetting"
                        @change="(value) => value == false && uploadLogoHandle({data:''})"
                    />
                </el-col>
            </el-row>
            <el-row v-if="showSettings.logoSetting" align="middle" type="flex">
                <el-col :span="6">
                    <span class="option-line-sub-title">logo设置</span>
                </el-col>
                <el-col :span="4">
                    <img
                        v-if="userProjectTheme.logoImage"
                        :src="userProjectTheme.logoImage"
                        style="width: 30px; height: 30px;"
                    >
                </el-col>
                <el-col :offset="6" :span="8">
                    <el-upload
                        ref="logoUpload"
                        :action="getUploadUrlBase64"
                        :headers="getUploadHeader"
                        :on-success="uploadLogoHandle"
                        :show-file-list="false"
                        accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP"
                    >
                        <el-button slot="trigger" size="small" type="text">上传Logo</el-button>
                    </el-upload>
                </el-col>
            </el-row>

            <el-row v-if="showSettings.logoSetting" align="middle" type="flex">
                <el-col :span="6">
                    <span class="option-line-sub-title">logo位置</span>
                </el-col>
                <el-col :span="18">
                    <el-radio-group
                        v-model="userProjectTheme.logoPosition"
                        size="mini" @change="saveUserTheme"
                    >
                        <el-radio-button label="left">左对齐</el-radio-button>
                        <el-radio-button label="center">居中</el-radio-button>
                        <el-radio-button label="right">右对齐</el-radio-button>
                    </el-radio-group>
                </el-col>
            </el-row>


            <el-row align="middle" class="option-line-view" type="flex">
                <el-col :span="8">
                    <span class="option-line-title">添加横幅</span>
                </el-col>
                <el-col :offset="8" :span="8">
                    <el-switch
                            v-model="showSettings.headImageSetting"
                            @change="(value) => value == false && uploadHeadImageHandle({data:''})"
                    />
                </el-col>
            </el-row>
            <el-row v-if="showSettings.headImageSetting" align="middle" type="flex">
                <el-col :span="6">
                    <span class="option-line-sub-title">横幅设置</span>
                </el-col>
                <el-col :span="4">
                    <img
                            v-if="userProjectTheme.headImage"
                            :src="userProjectTheme.headImage"
                            style="width: 120px; height: 60px;"
                    >
                </el-col>
                <el-col :offset="6" :span="8">
                    <el-upload
                            ref="logoUpload"
                            :action="getUploadUrlBase64"
                            :headers="getUploadHeader"
                            :on-success="uploadHeadImageHandle"
                            :show-file-list="false"
                            accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP"
                    >
                        <el-button slot="trigger" size="small" type="text">上传横幅</el-button>
                    </el-upload>
                </el-col>
            </el-row>


            <el-row align="middle" class="option-line-view" type="flex">
                <el-col :span="8">
                    <span class="option-line-title">背景设置</span>
                </el-col>
                <el-col :offset="8" :span="8">
                    <el-switch
                        v-model="showSettings.backgroundSetting"
                        @change="()=>{
                            this.userProjectTheme.backgroundImg=''
                            this.userProjectTheme.backgroundColor=''
                            this.saveUserTheme()
                        }"
                    />
                </el-col>
            </el-row>
            <el-row v-if="showSettings.backgroundSetting">
                <el-row align="middle" type="flex">
                    <el-col :span="8">
                        <span class="option-line-sub-title">背景类型</span>
                    </el-col>
                    <el-col :spvan="18">
                        <el-radio-group
                            v-model="showSettings.backgroundType"
                            size="mini" @change="()=>{
                                this.userProjectTheme.backgroundImg=''
                                this.userProjectTheme.backgroundColor=''
                            }"
                        >
                            <el-radio-button label="color">颜色</el-radio-button>
                            <el-radio-button label="img">图片</el-radio-button>
                        </el-radio-group>
                    </el-col>
                </el-row>
            </el-row>
            <el-row v-if="showSettings.backgroundSetting&&showSettings.backgroundType=='color'">
                <el-row align="middle" type="flex">
                    <el-col :span="8">
                        <span class="option-line-sub-title">选择颜色</span>
                    </el-col>
                    <el-col :spvan="18">
                        <el-color-picker
                            v-model=" userProjectTheme.backgroundColor"
                            size="small"
                            @change="saveUserTheme"
                        />
                    </el-col>
                </el-row>
            </el-row>
            <el-row v-if="showSettings.backgroundType=='img'">
                <el-row align="middle" type="flex">
                    <el-col :span="8">
                        <span class="option-line-sub-title">选择图片</span>
                    </el-col>
                    <el-col :spvan="18">
                        <el-upload
                            ref="upload"
                            :action="getUploadUrl"
                            :headers="getUploadHeader"
                            :on-success="uploadBackgroundHandle"
                            :show-file-list="false"
                            accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP"
                            class="upload-demo"
                        >
                            <el-button slot="trigger" size="small" type="text">上传背景</el-button>
                        </el-upload>
                    </el-col>
                </el-row>
            </el-row>

            <el-row align="middle" class="option-line-view" type="flex">
                <el-col :span="8">
                    <span class="option-line-title">显示标题</span>
                </el-col>
                <el-col :offset="8" :span="8">
                    <el-switch
                        v-model="userProjectTheme.showTitle"
                        @change="saveUserTheme"
                    />
                </el-col>
            </el-row>
            <el-row align="middle" class="option-line-view" type="flex">
                <el-col :span="8">
                    <span class="option-line-title">显示描述</span>
                </el-col>
                <el-col :offset="8" :span="8">
                    <el-switch
                        v-model="userProjectTheme.showDescribe"
                        @change="saveUserTheme"
                    />
                </el-col>
            </el-row>
            <el-row align="middle" class="option-line-view" type="flex">
                <el-col :span="8">
                    <span class="option-line-title">显示序号</span>
                </el-col>
                <el-col :offset="8" :span="8">
                    <el-switch
                        v-model="userProjectTheme.showNumber"
                        @change="saveUserTheme"
                    />
                </el-col>
            </el-row>

          <el-row align="middle" class="option-line-view" type="flex">
            <el-col :span="8">
              <span class="option-line-title">重置按钮</span>
            </el-col>
            <el-col :offset="8" :span="8">
              <el-switch
                v-model="userProjectTheme.showResetButton"
                @change="saveUserTheme"
              />
            </el-col>
          </el-row>

          <el-row v-if="userProjectTheme.showResetButton">
            <el-row align="middle" type="flex">
              <el-col :span="12">
                <span class="option-line-sub-title">重置按钮文字</span>
              </el-col>
              <el-col :spvan="10">
                <el-input v-model="userProjectTheme.resetButtonText"
                          placeholder="请输入内容"
                          size="mini"
                          style="width: 80%;" @change="saveUserTheme"
                />
              </el-col>
            </el-row>

            <el-row align="middle" type="flex">
              <el-col :span="12">
                <span class="option-line-sub-title">重置按钮颜色</span>
              </el-col>
              <el-col :spvan="10">
                <el-color-picker
                  v-model=" userProjectTheme.resetButtonColor"
                  size="small"
                  @change="saveUserTheme"
                />
              </el-col>
            </el-row>
          </el-row>



          <el-row align="middle" class="option-line-view" type="flex" style="display: none">
            <el-col :span="8">
              <span class="option-line-title">提交按钮</span>
            </el-col>
            <el-col :offset="8" :span="8">
              <el-switch
                v-model="showSettings.btnSetting"
              />
            </el-col>
          </el-row>
          <el-row>
            <el-row align="middle" type="flex">
              <el-col :span="12">
                <span class="option-line-sub-title">提交按钮文字</span>
              </el-col>
              <el-col :spvan="10">
                <el-input v-model="userProjectTheme.submitButtonText"
                          placeholder="请输入内容"
                          size="mini"
                          style="width: 80%;" @change="saveUserTheme"
                />
              </el-col>
            </el-row>


            <el-row align="middle" type="flex">
              <el-col :span="12">
                <span class="option-line-sub-title">提交按钮颜色</span>
              </el-col>
              <el-col :spvan="10">
                <el-color-picker
                  v-model=" userProjectTheme.buttonColor"
                  size="small"
                  @change="saveUserTheme"
                />
              </el-col>
            </el-row>
          </el-row>

        </div>
    </div>
</template>

<script>
import PreView from '../preview/index'
import { getDicListByDictCodeList } from '@/api/common/dict'
import {queryFormProjectThemePageResList } from '@/api/form/formProjectTheme'
import {queryFormProjectStyleResByProjectId, updateFormProjectStyle} from '@/api/form/formProjectStyle'
import {getAppApiUrl, getToken} from '@/utils/auth'
export default {
    name: 'Theme',
    components: {
        PreView
    },
    data() {
        return {
            // 外观设置
            showSettings: {
                // 打开logo
                logoSetting: false,
                // 打开headImage
                headImageSetting: false,
                backgroundSetting: false,
                btnSetting: false,
                backgroundType: 'color'
            },
            // 用户主题设置
            userProjectTheme: {
                projectId: '',
                showTitle: true,
                showDescribe: true,
                showNumber: false,
                backgroundColor: '',
                backgroundImg: '',
                buttonColor: "#409EFF",
                logoImage: '',
                headImage:'',
                logoPosition: 'left',
                submitButtonText: '提交',
                resetButtonColor:'#909399',
                showResetButton: false,
                resetButtonText: '重置'
            },
            projectFormKey: +new Date().getTime(),
            projectId: '',
            styleList: [],
            colorList: [],
            activeColor: '',
            activeStyle: '',
            activeTheme: '',
            themeList: []
        }
    },
    computed: {
        getUploadHeader() {
            return {
              token: getToken(),
            }
        },
            getUploadUrlBase64() {
              return getAppApiUrl()+`/sysCommon/upload/imageSingleUploadToImageBase64`;
            },
          getUploadUrl() {
            return getAppApiUrl()+`/sysCommon/upload/imageSingleUploadToFileAbsolutePath`;
          }
    },
    mounted() {
        this.projectId = this.$route.query.key
        this.queryProjectTheme()
        this.projectFormKey = +new Date().getTime()
        this.queryUserProjectTheme()
    },
    created() {
      this.initDict();
    },
    methods: {
        //获取数据字典
        initDict(){
          let dictArr = ["FORM_PROJECT_THEME_STYLE","FORM_PROJECT_THEME_COLOR"];
          getDicListByDictCodeList(dictArr).then(res => {
            this.styleList = JSON.parse(JSON.stringify(res.data['FORM_PROJECT_THEME_STYLE']));
            this.colorList = JSON.parse(JSON.stringify(res.data['FORM_PROJECT_THEME_COLOR']));
          });
        },

        uploadBackgroundHandle(response) {
            this.userProjectTheme.backgroundImg = response.data
            this.userProjectTheme.backgroundColor = ''
            this.saveUserTheme()
        },
        uploadLogoHandle(response) {
            this.userProjectTheme.logoImage = response.data
            this.saveUserTheme()
        },

      uploadHeadImageHandle(response) {
        this.userProjectTheme.headImage = response.data
        this.saveUserTheme()
      },

        activeStyleHandle(item) {
            this.activeStyle = item.dictCode
            this.queryProjectTheme()
        },
        saveUserTheme() {
          this.userProjectTheme.projectId = this.projectId
          let activeTheme = this.activeTheme;
            if (activeTheme&&activeTheme.themeId){
              if(activeTheme.buttonColor)this.userProjectTheme.buttonColor = activeTheme.buttonColor
              if(activeTheme.headImage)this.userProjectTheme.headImage = activeTheme.headImage
              if(activeTheme.backgroundColor)this.userProjectTheme.backgroundColor = activeTheme.backgroundColor
              if(activeTheme.backgroundImg)this.userProjectTheme.backgroundImg = activeTheme.backgroundImg
              if(activeTheme.showTitle)this.userProjectTheme.showTitle = activeTheme.showTitle
              if(activeTheme.submitButtonText)this.userProjectTheme.submitButtonText = activeTheme.submitButtonText
              if(activeTheme.showDescribe)this.userProjectTheme.showDescribe = activeTheme.showDescribe
              if(activeTheme.showNumber)this.userProjectTheme.showNumber = activeTheme.showNumber
              if(activeTheme.showResetButton)this.userProjectTheme.showResetButton = activeTheme.showResetButton
              if(activeTheme.resetButtonText)this.userProjectTheme.resetButtonText = activeTheme.resetButtonText
              if(activeTheme.resetButtonColor)this.userProjectTheme.resetButtonColor = activeTheme.resetButtonColor
            }
            if(!this.userProjectTheme.buttonColor)this.userProjectTheme.buttonColor = "#409EFF"
            if(!this.userProjectTheme.resetButtonColor)this.userProjectTheme.resetButtonColor = "#909399"
            if(!this.userProjectTheme.resetButtonText)this.userProjectTheme.resetButtonText = "重置"
            if(!this.userProjectTheme.submitButtonText)this.userProjectTheme.submitButtonText = "提交"
            //this.userProjectTheme.themeId = this.activeTheme ? this.activeTheme.themeId : ''
          updateFormProjectStyle(this.userProjectTheme).then(res => {
              this.projectFormKey = +new Date().getTime()
              this.queryUserProjectTheme()
              }
            )
        },
        queryUserProjectTheme() {
          queryFormProjectStyleResByProjectId({"projectId":this.projectId}).then(res => {
            if (!res) {
              return
            }
            this.userProjectTheme = res.data
            let {themeId, logoImage, backgroundImg, backgroundColor, submitButtonText, headImage} = res.data
            this.activeTheme = {
              'themeId': themeId
            }
            this.showSettings.logoSetting = !!logoImage
            this.showSettings.headImageSetting = !!headImage
            this.showSettings.btnSetting = !!submitButtonText
            if (backgroundImg || backgroundColor) {
              this.showSettings.backgroundSetting = true
              this.showSettings.backgroundType = backgroundImg ? 'img' : 'color'
            }
            }
          )
        },
        activeThemeHandle(item) {
            if (item) {
                this.$confirm('切换主题，系统将不会保存您在上一主题所做的修改，请知悉。', '切换主题提醒', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消操作',
                    type: 'info'
                }).then(() => {
                    this.activeTheme = item
                    this.saveUserTheme()
                }).catch(() => {

                })
            }
        },
        activeColorHandle(item) {
            this.activeColor = item.dictColor
            this.queryProjectTheme()
        },
        queryProjectTheme() {
          queryFormProjectThemePageResList({"themeColor":this.activeColor,"themeStyle":this.activeStyle,"rows":0,"page":1}).then(res => {
              this.themeList = res.data.records
            }
          )
        }
    }
}
</script>

<style scoped>
.theme-container {
    width: 100%;
    height: 100%;
    background-color: #f7f7f7;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    justify-content: center;
}
.left-container {
    line-height: 50px;
    text-align: center;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 100);
    background-color: white;
    width: 20%;
    height: calc(100vh - 30px);
}
.left-scrollbar-container {
    height: 100%;
    margin: 20px;
}
::v-deep .el-scrollbar__wrap {
    overflow-x: hidden !important;
}
.style-btn {
    line-height: 30px;
    border-radius: 4px;
    padding: 3px;
    color: #707070;
    font-size: 14px;
    text-align: center;
    border: 1px solid #eaeaea;
}
.preview-container {
    width: 70%;
}
.theme-title {
    color: rgba(16, 16, 16, 100);
    font-size: 24px;
    text-align: left;
}
.theme-prompt-text {
    color: rgba(16, 16, 16, 100);
    font-size: 16px;
    line-height: 30px;
    text-align: left;
}
.color-btn {
    width: 40px;
    height: 22px;
    line-height: 20px;
    border-radius: 4px;
    background-color: rgba(11, 141, 213, 100);
    color: rgba(16, 16, 16, 100);
    font-size: 14px;
    text-align: center;
    margin: 15px 3px 3px 0px;
    border: 1px solid rgba(255, 255, 255, 100);
}
.color-btn:hover,
.style-btn:hover {
    cursor: pointer;
    border: 1px solid rgba(11, 141, 213, 100);
}
.style-btn-active {
    border: 1px solid rgba(11, 141, 213, 100);
}
.head-list-img {
    border: 2px solid transparent;
}
.head-list-img:hover {
    cursor: pointer;
    border: 2px solid rgba(11, 141, 213, 100);
}
.head-list-img-active {
    border: 2px solid rgba(11, 141, 213, 100);
}
.theme-img-view .head-list-view-select ::after {
    content: "";
    background: url('~@/assets/images/form/mobile_theme_active.png');
    background-size: 18px;
    width: 18px;
    height: 18px;
    position: absolute;
    top: 4px;
    right: 4px;
}
.right-container {
    width: 310px;
    height: calc(100vh - 60px);
    line-height: 20px;
    text-align: center;
    padding: 22px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 100);
    background-color: white;
    margin-right: 5px;
}
.right-title {
    color: rgba(16, 16, 16, 100);
    font-size: 24px;
    text-align: left;
    margin: 0 0 30px 0;
}
.right-container .option-line-view {
    padding: 0;
    width: 280px;
    height: 42px;
    line-height: 20px;
    border-radius: 5px;
    text-align: center;
    margin-bottom: 10px;
    border: 1px solid rgba(187, 187, 187, 100);
}
.right-container .option-line-title {
    color: rgba(16, 16, 16, 100);
    line-height: 40px;
    font-size: 14px;
    text-align: left;
}
.option-line-sub-title {
    color: rgb(82, 81, 81);
    line-height: 40px;
    font-size: 13px;
    text-align: left;
}
</style>
